<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../css/elementUI.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/elementUI.js"></script>

    <!--<script src="js/categorys.js"></script>-->
    <!--<script src="js/brand.js"></script>-->
    <!--<script src="js/template.js"></script>-->
    <!--<script src="js/para.js"></script>-->
    <!--<script src="js/spec.js"></script>-->
    <!--<script src="js/album.js"></script>-->


    <style>
        #app button{
            text-align: center;
        }
    </style>
    <style>
        .el-row {
            margin-bottom: 10px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #f1f1f1;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
        .el-dialog__body{
            padding: 0 10px;
        }
        #uploadSkuImgDialog .el-dialog {
            max-height: 560px;
            overflow-y: auto;
        }
    </style>
</head>
<body>

<div id="app">
    <!--步骤条-->
    <el-steps :active="active" finish-status="success" >
        <el-step title="选择分类"></el-step>
        <el-step title="填写商品信息"></el-step>
        <el-step title="填写商品属性"></el-step>
    </el-steps>

    <!--step one 选择分类-->
    <el-cascader-panel v-model="categoryIds"
            v-if="active==0"
            :options="categoryListToShow"
            size="medium"
            @expand-change="expandChange"
            @change="changeValue">
    </el-cascader-panel>

    <!--step two 填写spu属性-->
    <el-form ref="form1" :model="form1" label-width="80px"
             v-if="active==1">
        <el-form-item label="分类" label-width="120px">
            {{categoryNames.map(c=>c.name).join(">")}}
            <el-link icon="el-icon-edit"  type="primary"  :underline="false" @click="back">编辑</el-link>
        </el-form-item>
        <el-form-item label="商品名称"  label-width="120px">
            <el-input v-model="form1.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品副标题" label-width="120px">
            <el-input v-model="form1.subtitle" clearable></el-input>
        </el-form-item>
        <el-form-item label="品牌" label-width="120px">
            <el-select v-model="form1.brandId" placeholder="请选择品牌" clearable filterable >
                <el-option :label="b.name" :value="b.id" v-for="b in brandList" :key="b.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="货号" label-width="120px">
            <el-input v-model="form1.huoNum" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品描述" label-width="120px">
            <el-input v-model="form1.descript" type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            ></el-input>
        </el-form-item>

        <el-form-item label="服务保证" label-width="120px">
            <el-checkbox-group v-model="form1.service">
                <el-checkbox label="免费包邮" name="type"></el-checkbox>
                <el-checkbox label="极速退款" name="type"></el-checkbox>
                <el-checkbox label="退货无忧" name="type"></el-checkbox>
                <el-checkbox label="免费投诉" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
    </el-form>

    <!--step three 填写sku属性-->
    <div v-if="active==2">
        <el-divider content-position="left">模板规格选择</el-divider>
        <el-form ref="form2" :model="form2" label-width="80px" >
            <!--选择规格模板-->
            <el-form-item label="参数规格模板" label-width="120px">
                <el-select v-model="form2.templateId" placeholder="请选择模板" clearable filterable @change="handlerTemplateIdChange">
                    <el-option :label="b.name" :value="b.id" v-for="b in templateList" :key="b.id"></el-option>
                </el-select>
            </el-form-item>

            <!--根据选择的模板，动态渲染商品规格列表-->
            <el-form-item label="商品规格" label-width="120px" v-if="">
                <el-row v-for="(s,i) in specListToShow" :key="i">
                    <el-col>
                        {{s.name}}：
                        <el-checkbox-group v-model="specArrays[s.name]" @change="checkSpecChange(s.name)">
                            <el-checkbox :label="o" :value="o" v-for="o in s.options.split(',')" :key="o" type="s.name"></el-checkbox>
                        </el-checkbox-group>
                    </el-col>
                </el-row>
            </el-form-item>

            <!--根据选择的规格组合，动态显示所有规格的组合结果-->
            <el-table v-if="tableColumnToShow.length>0"
                      :data="tableColumnToShow"
                      style="width: 100%">
                <el-table-column
                        label="序号" width="120px">
                    <template slot-scope="scope">{{ scope.$index+1 }}</template>
                </el-table-column>
                <el-table-column
                        v-for="(t,i) in tableColumnNames"
                        :label="t" :key="i"
                >
                    <template slot-scope="scope">{{ scope.row[i] }}</template>
                </el-table-column>
                <el-table-column
                        label="销售价格(分)">
                    <template slot-scope="scope">
                        <el-input type="number"  v-model="skuDetailInfo[scope.$index].price" clearable></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="库存">
                    <template slot-scope="scope">
                        <el-input type="number"  v-model="skuDetailInfo[scope.$index].num" clearable></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="预警库存">
                    <template slot-scope="scope">
                        <el-input type="number" v-model="skuDetailInfo[scope.$index].alertNum" clearable></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="SKU编号">
                    <template slot-scope="scope">
                        <el-input v-model="skuDetailInfo[scope.$index].sn" clearable></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="delSpecGroup(scope.$index)">删除</el-button>
                        <el-button type="text" @click="chooseImgForSku(scope.$index)">
                            上传图片 <span v-if="SKUChoosedImgUrls.find(skuImg=>skuImg.index==scope.$index)">(已选{{SKUChoosedImgUrls.find(skuImg=>skuImg.index==scope.$index).images.length}}张)</span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--在规格组合列表中，上传按钮的弹出框，给单个的sku上传图片用-->
            <el-dialog title="上传图片" id="uploadSkuImgDialog"
                       :visible.sync="uploadSkuImgShow"
                       width="70%" top="10px"
                       :before-close="beforeClosedDialogFromSKUImgUpload">
                <el-form>
                    <el-form-item label="商品名称" label-width="120px" style="margin-bottom: 0px;">
                        {{form1.name}}
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0px;" :label="tableColumnNames[i]" label-width="120px" :key="i" v-for="(c,i) in tableColumnToShow[currentChoosedSkuIndex]">
                        {{c}}
                    </el-form-item>
                    <el-form-item label="商品图片" label-width="120px" style="margin-bottom: 0px;">

                        <el-upload
                                class="upload-demo"
                                action="/upload/uploadLocal.do"
                                multiple
                                :show-file-list="false"
                                :on-success="uploadImgSuccessInSKUAlbum"
                                accept="image/*"
                                :limit="15">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <el-button size="small" type="primary"  @click.stop="chooseImgFromAlbum('sku')">从图库中选择</el-button>
                        </el-upload>

                        <!--上传的sku的图片的展示区域-->
                        <el-row :gutter="20"  style="max-height: 320px;overflow-y: auto;margin-top: 5px;max-width: 102%;">
                            <el-col :span="4" v-for="(a,i) in uploadedFileListInSKUAlbum" style="margin-bottom: 5px;" :key="i">
                                <div class="grid-content" style="text-align: center;line-height: 18px;">
                                    <img :src="a.url" alt="" width="100px" height="100px">
                                    <el-button style="padding: 0" type="text" @click="delSKUChoosedImg(i)">删除图片</el-button>
                                </div>
                            </el-col>
                        </el-row>

                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="uploadSKUImgDone">确 定</el-button>
                </div>
            </el-dialog>

            <!--商品参数列表，根据选择的模板，动态渲染出参数列表-->
            <el-divider content-position="left">参数列表</el-divider>
            <el-form-item :label="s.name" label-width="120px"  v-for="(s,i) in paraListToShow" :key="i">
                <el-select v-model="paraArrays[s.name]" :placeholder="'请选择'+s.name" clearable filterable >
                    <el-option :label="o" :value="o" v-for="o in s.options.split(',')" :key="o"></el-option>
                </el-select>
            </el-form-item>

            <!--商品相册，spu的图片-->
            <el-divider content-position="left">商品相册</el-divider>
            <el-upload
                    class="upload-demo"
                    action="/upload/uploadLocal.do"
                    multiple
                    :show-file-list="false"
                    :on-success="uploadImgSuccessInSPUAlbum"
                    accept="image/*"
                    :limit="20">
                <el-button size="small" type="primary">点击上传</el-button>
                <el-button size="small" type="primary"  @click.stop="chooseImgFromAlbum('spu')">从图库中选择</el-button>
            </el-upload>

            <!--上传的spu的图片的展示区域-->
            <el-row :gutter="24" v-if="uploadedFileListInSPUAlbum.length>0" style="max-height: 320px;overflow-y: auto;margin-top: 5px;">
                <el-col :span="4" v-for="(a,i) in uploadedFileListInSPUAlbum" :key="i" style="margin-bottom: 20px;">
                    <div class="grid-content bg-purple" style="text-align: center">
                        <img :src="a.url" alt="" width="150px" height="150">
                        <br>
                        <el-button type="text" v-if="a.isMain" style="color:red;">商品主图</el-button>
                        <el-button type="text" v-if="!a.isMain" @click="setChoosedImgToMain(i)">设为主图</el-button>
                        <el-button type="text" @click="delChoosedImg(i)">删除图片</el-button>
                    </div>
                </el-col>
            </el-row>

            <!--商品描述详情-->
            <!--数据库没有字段存储这个信息，暂时注掉
                <el-divider content-position="left">详情描述</el-divider>
                <el-form-item label="详情描述" label-width="120px" >
                    <el-input
                            type="textarea"
                            :rows="5"
                            :autosize="{minRows: 5,maxRows:10}"
                            placeholder="请输入内容"
                            v-model="spuDetail">
                    </el-input>
                </el-form-item>
            -->

        </el-form>

        <!--这个是从相册选择的弹出框-->
        <el-dialog
                title="选择图片"
                :visible.sync="dialogVisible"
                width="60%" top="5px" :before-close="beforeClosedDialogFromAlbum"
                >

            <!--相册选择-->
            <el-select v-model="choosedAlbumId" placeholder="请选择相册">
                <el-option
                        v-for="item in albumList"
                        :key="item.value"
                        :label="item.title"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-button type="danger"  @click.stop="clearChoosedImg">清理</el-button>
            <el-button type="primary"  @click.stop="chooseAllImg">全选</el-button>
            <el-divider></el-divider>

            <!--展示每个相册下的所有图片-->
            <el-checkbox-group v-model="choosedImgs" @change="chooseImgChanges">
                <el-row :gutter="20" v-if="toChooseAlbumImageList.length>0" style="max-height: 320px;overflow-y: auto;">
                    <el-col :span="6" v-for="a in toChooseAlbumImageList" :key="a.url" style="margin-bottom: 20px;">
                        <div class="grid-content bg-purple" style="text-align: center">
                            <el-checkbox :label="a.url" name="img" style="position: relative;top: -130px;left: 2px;">{{''}}</el-checkbox>
                            <img :src="a.url" alt="" width="150px" height="150"  @click="chooseOneImg(a.url)">
                        </div>
                    </el-col>
                </el-row>
            </el-checkbox-group>

            <!--相册下没有图片提示-->
            <el-empty description="当前相册下没有图片" v-if="toChooseAlbumImageList.length==0"></el-empty>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="chooseImgFromAlbumDone">确 定</el-button>
            </span>
        </el-dialog>
    </div>

    <!--每一步的按钮-->
    <el-button style="margin-top: 12px;" @click="back" type="primary" plain>上一步</el-button>
    <el-button style="margin-top: 12px;" @click="next" type="primary" plain>下一步</el-button>
    <el-button style="margin-top: 12px;"  type="primary" v-if="active==2" @click="submitAllData">保存数据</el-button>
</div>

</body>
<script>

    var arrsTemp = [];
    new Vue({
        el: "#app",
        data: {
            //需要初始化的数据
            categoryList:[],
            paraList:[],
            specList:[],
            brandList:[],
            templateList:[],
            albumList:[],


            spuDetail:"",//详情描述
            specArrays:{

            },
            paraArrays:{

            },
            skuDetailInfo:[],//每个sku的库存等信息存储
            tableColumnToShow:[],
            tableColumnNames:[],
            specListToShow:[],
            paraListToShow:[],
            form2:{//存放部分spu信息
                templateId:""
            },
            form1: {//存放spu信息
                service: [],
            },
            active:0,
            categoryIds:[],
            categoryNames:[],
            categoryListToShow:[],

            //弹出的相册用
            dialogVisible:false,
            chooseImgMode:"",
            choosedAlbumId:"",
            toChooseAlbumImageList:[],
            choosedImgs:[],
            currentChoosedSkuIndex:"",

            SKUChoosedImgUrls:[],//单个sku最终选择的所有图片集合

            //商品spu的相册列表上传的时候后
            uploadedFileListInSPUAlbum:[],

            uploadSkuImgShow:false,//sku图片选择的弹出框，先弹出这个，在这里可以从相册选，在弹出相册的
            //商品sku的相册列表上传的时候后，所有的图片列表
            uploadedFileListInSKUAlbum:[],

        },
        watch:{
            choosedAlbumId(n){
                this.choosedAlbumImageList = [];
                if(n&&n!=''){
                    var imgStr = this.albumList.find(a=>a.id==n);
                    this.toChooseAlbumImageList = JSON.parse(imgStr.imageItems);
                }
            },
        },
        methods: {
            handlerTemplateIdChange(n){

                axios.post(`/spec/findList.do`,{templateId:n}).then(res=>{
                    this.specList = res.data;
                    axios.post(`/para/findList.do`,{templateId:n}).then(res=>{
                        this.paraList = res.data;

                        this.specListToShow = this.specList.filter(s=>s.templateId==n)
                        this.specArrays = {}
                        for (let i = 0; i < this.specListToShow.length; i++) {
                            this.specArrays[this.specListToShow[i].name] = [];
                        }
                        this.specArrays = JSON.parse(JSON.stringify(this.specArrays))

                        this.paraListToShow = this.paraList.filter(s=>s.templateId==n)
                        this.paraArrays = {}
                        for (let i = 0; i < this.paraListToShow.length; i++) {
                            this.paraArrays[this.paraListToShow[i].name] = [];
                        }
                        this.paraArrays = JSON.parse(JSON.stringify(this.paraArrays))
                        this.checkSpecChange()//清空表格的内容

                    })
                })




            },
            delSpecGroup(index){
                this.$confirm('确认删除当前组合?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableColumnToShow.splice(index,1)
                    this.skuDetailInfo.splice(index,1)
                    for (let i = 0; i < this.SKUChoosedImgUrls.length; i++) {
                        if(this.SKUChoosedImgUrls[i].index==index){
                            this.SKUChoosedImgUrls.splice(i,1);
                            break;
                        }
                    }
                }).catch(() => {

                });

            },
            delSKUChoosedImg(index){
                this.uploadedFileListInSKUAlbum.splice(index,1)
            },
            uploadSKUImgDone(){
                if(this.uploadedFileListInSKUAlbum.length==0){
                    this.$message('你还没有上传图片');
                    return;
                }
                var obj = {
                    index:this.currentChoosedSkuIndex,
                    images:this.uploadedFileListInSKUAlbum.map(s=>s.url)
                };
                for (let i = 0; i < this.SKUChoosedImgUrls.length; i++) {
                    if(this.SKUChoosedImgUrls[i].index==this.currentChoosedSkuIndex){
                        this.SKUChoosedImgUrls.splice(i,1);
                        break;
                    }
                }
                this.SKUChoosedImgUrls.push(obj);
                this.initUploadSkuImg();
            },
            beforeClosedDialogFromSKUImgUpload(close){
                this.initUploadSkuImg();
                close();
            },
            initUploadSkuImg(){
                this.uploadedFileListInSKUAlbum = [];
                this.currentChoosedSkuIndex = "";
                this.uploadSkuImgShow = false;
            },
            uploadImgSuccessInSKUAlbum(res,file){
                this.uploadedFileListInSKUAlbum.push({
                    url:res,
                });
            },
            chooseImgForSku(skuIndex){
                this.currentChoosedSkuIndex = skuIndex;//把index传过来了
                this.uploadSkuImgShow = true;

                let temp = this.SKUChoosedImgUrls.find(si=>si.index==skuIndex);
                if(temp){
                    temp.images.forEach(url=>{
                        this.uploadedFileListInSKUAlbum.push({
                            url:url,
                        });
                    })
                }
            },
            clearChoosedImg(){
                this.choosedImgs = [];
            },
            chooseAllImg(){
                this.choosedImgs = this.toChooseAlbumImageList.map(c=>c.url)
            },
            delChoosedImg(index){
                this.uploadedFileListInSPUAlbum.splice(index,1)
            },
            setChoosedImgToMain(index){
                var mainImg = {};
                for (let i = 0; i < this.uploadedFileListInSPUAlbum.length; i++) {
                    var t = this.uploadedFileListInSPUAlbum[i];
                    if(i==index){
                        t.isMain = true;
                        mainImg = t
                        this.uploadedFileListInSPUAlbum.splice(i,1)
                    }else{
                        t.isMain = false;
                    }
                }
                var newArr = [];
                newArr.push(mainImg)
                this.uploadedFileListInSPUAlbum = newArr.concat(this.uploadedFileListInSPUAlbum)
            },
            uploadImgSuccessInSPUAlbum(res,file){
                this.uploadedFileListInSPUAlbum.push({
                    url:res,
                    isMain:false
                });
            },
            chooseImgFromAlbumDone(){
                if(this.chooseImgMode=='sku'){//单个商品的
                    for (let i = 0; i < this.choosedImgs.length; i++) {
                        this.uploadedFileListInSKUAlbum.push({
                            url:this.choosedImgs[i],
                        });
                    }

                }else if(this.chooseImgMode == 'spu'){//
                    for (let i = 0; i < this.choosedImgs.length; i++) {
                        this.uploadedFileListInSPUAlbum.push({
                            url:this.choosedImgs[i],
                            isMain:false
                        });
                    }

                }
                this.initChoosedImgData()
            },
            beforeClosedDialogFromAlbum(close){
                this.initChoosedImgData()
                close()
            },
            initChoosedImgData(){
                this.dialogVisible = false,
                this.chooseImgMode = "",
                this.choosedAlbumId = "",
                this.toChooseAlbumImageList = [],
                this.choosedImgs = []
            },
            chooseOneImg(url){
                var flag = false;
                for (let i = 0; i < this.choosedImgs.length; i++) {
                    if(this.choosedImgs[i]==url){
                        flag = true;
                        this.choosedImgs.splice(i,1)
                        break;
                    }
                }
                if(!flag){
                    this.choosedImgs.push(url)
                }
            },
            chooseImgChanges(val){
                // this.choosedImgs = val;
            },
            chooseImgFromAlbum(mode){
                this.chooseImgMode = mode;
                if(this.albumList.length>0){
                    this.choosedAlbumId = this.albumList[0].id
                }
                //如需特殊处理，在这里写
                if(this.chooseImgMode=='sku'){//单个商品的

                }else if(this.chooseImgMode == 'spu'){//

                }
                this.dialogVisible = true;
            },
            getTimes(i,total,arr){
                var num = 1;
                for (let j = i+2; j <=total; j++) {
                    num*=arr[j-1].length;
                }
                return num;
            },
            checkSpecChange(name){
                //初始化数据
                arrsTemp = [];
                this.tableColumnToShow = [];
                this.tableColumnNames = [];
                this.SKUChoosedImgUrls = [];//初始化所有选择的图片
                this.skuDetailInfo = [];//初始化库存等信息

                //把所有选择的数据，先把名字取出来，然后把数组取出来，分别放到名字数组和数据数组，
                //名字数组循环表头
                //数据数组是要转化的数据
                for (var key in this.specArrays) {
                    if(this.specArrays[key].length>0){
                        this.tableColumnNames.push(key);//把key放到表头的数据模型中
                        arrsTemp.push(this.specArrays[key])//选中的数据数组，放入数组中，形成二维数组
                    }
                }
                if(arrsTemp.length>0){//如果数据数组有数据，在进行逻辑操作
                    //total为根据每个数据数组的长度计算出总的数据量
                    var total = arrsTemp.reduce((a,b)=>a*b.length,1);
                    //这个是每个数组的数据的长度，选了几种规格，每个数组的数据就是多少
                    var length = arrsTemp.length;

                    var arraysTotal = [];//定义个临时数组，这个就是最终转换完成要显示在列表中的数据
                    //先根据数据的总条数，往里添加这么多个空数组
                    for (let i = 0; i < total; i++) {
                        arraysTotal.push(new Array(length))
                    }
                    //数组中每个元素的长度一致，整体逻辑就是：
                    //先算第一位，在算第二位，一次类推
                    for (let i = 0; i < length; i++) {
                        //获取到每一位能被使用的次数，就是后边每个数组的长度乘积
                        var times = this.getTimes(i,length,arrsTemp)
                        var useTimes = 0;//定义使用次数
                        var dataIndex = 0;//定义取值的下标
                        //循环取出每个空数组，向当前下标中放数据
                        for (let j = 0; j <arraysTotal.length; j++) {
                            if(useTimes == times){//如果使用次数等于总次数之后，需要初始化
                                useTimes = 0;//使用次数归零
                                dataIndex++//数据下标+1
                                if(dataIndex==arrsTemp[i].length){//如果取到最后一个下标之后，从头取，下标归零
                                    dataIndex=0;
                                }
                            }
                            //得到当前空数组
                            var arr = arraysTotal[j];
                            //从选择的数据中得到当前应当放入的数据
                            var dataToPush = arrsTemp[i][dataIndex];
                            //放入当前位置
                            arr[i] = dataToPush;
                            //使用一次，次数加1
                            useTimes++
                        }
                    }
                    this.tableColumnToShow = arraysTotal;//赋值给表格数据模型


                    //把每个匹配的组合都赋初始值
                    // this.skuDetailInfo = new Array(arraysTotal.length)
                    for (let i = 0; i <arraysTotal.length ; i++) {
                        this.skuDetailInfo.push({
                            sn: "",
                            num: "",
                            alertNum: "",
                            price: "",
                        })
                    }

                }
            },
            submitAllData() {//最终保存数据
                var spu = {
                    name: this.form1.name,
                    caption: this.form1.subtitle,
                    brandId: this.form1.brandId,
                    category1Id: this.categoryIds[0],
                    category2Id: this.categoryIds[1],
                    category3Id: this.categoryIds[2],
                    freightId: 10,//没有运费，固定传一个id即可
                    image: this.uploadedFileListInSPUAlbum[0].url,
                    images:this.uploadedFileListInSPUAlbum.map(u=>u.url).join(","),
                    introduction: this.form1.descript,
                    paraItems: JSON.stringify(this.paraArrays),
                    saleService: this.form1.service.join(","),
                    sn: this.form1.huoNum,
                    specItems: JSON.stringify(this.specArrays),
                    templateId: this.form2.templateId
                }
                var skuList = [];
                for (let i = 0; i < this.skuDetailInfo.length; i++) {
                    var tempSku = this.skuDetailInfo[i];
                    var spec = {};
                    for (let j = 0; j < this.tableColumnNames.length; j++) {
                        spec[this.tableColumnNames[j]] = this.tableColumnToShow[i][j];
                    }
                    var sku = {
                        sn: tempSku.sn,
                        num: tempSku.num,
                        alertNum: tempSku.alertNum,
                        price: tempSku.price,
                        spec: JSON.stringify(spec),
                        image: this.SKUChoosedImgUrls[i].images[0],
                        images:this.SKUChoosedImgUrls[i].images.join(","),
                        status: "1",
                        weight: 130,
                        categoryId:this.categoryIds[2],
                        categoryName:this.categoryNames[2].name,
                        brandName:this.brandList.find(b=>b.id==this.form1.brandId).name,
                    }
                    skuList.push(sku)
                }
                var submitObj = {
                    spu,
                    skuList
                }
                console.log(submitObj)

                axios.post(`/spu/add.do`,submitObj).then(res=>{
                    location.href = "goods.html";
                })
            },
            back(){
                this.active--
                if(this.active<0){
                    this.active=0
                }
            },
            next(){
                if(this.categoryIds.length<3){
                    this.$message('请选择分类');
                    return;
                }
                this.active++
                if(this.active>2){
                    this.active=2
                }
            },
            expandChange(arr){
                this.categoryIds = arr;
            },
            changeValue(val){
                this.categoryIds = val;
                this.categoryNames = [];
                for (let i = 0; i < this.categoryIds.length; i++) {
                    this.categoryNames.push(this.categoryList.find(c=>c.id==this.categoryIds[i]))
                }

                this.brandList = [];
                if(val&&val.length!=0){
                    axios.get(`/categoryBrand/findBrandByCategoryIdByMybatisXml.do?categoryId=${val[2]}`).then(res=>{
                        this.brandList = res.data;
                    })

                }
            },
            initCategoryList(){
                axios.get(`/category/findAll.do`).then(res=>{
                    this.categoryList = res.data;
                    this.categoryListToShow = this.findByPid(0)
                    for (let i = 0; i < this.categoryListToShow.length; i++) {
                        var c = this.categoryListToShow[i];
                        c.children = this.findByPid(c.id);
                        for (let j = 0; j < c.children.length; j++) {
                            var tc = c.children[j];
                            tc.children = this.findByPid(tc.id);
                        }
                    }

                })


            },
            findByPid(pid){
                var arr = this.categoryList.filter(c=>c.parentId==pid)
                arr = arr.map(c=>{
                    return {
                        label:c.name,
                        value:c.id,
                        id:c.id
                    }
                })
                return arr;
            },
            initTemplateList(){
                axios.get(`/template/findAll.do`).then(res=>{
                    this.templateList = res.data;
                })
            },
            initAlbumList(){
                axios.get(`/album/findAll.do`).then(res=>{
                    this.albumList = res.data;
                })
            }

        },
        created() {
            this.initCategoryList()
            this.initTemplateList()
            this.initAlbumList()
        }
    })
</script>
</html>